<template>
	<view class="site-container">
		<!-- navbar -->
		<!-- <view class="header">
			<image src="/static/images/leftarrow.png" @click="goCart" />
			<view class="title">收货地址</view>
		</view> -->
		
		<view class="site-list">
			<view class="site-item" v-for="item in cartStore.siteData" :key="item.id" >
				<view class="site-text" @click="cartStore.selectSite(item.id)">
					<view class="big-site">{{item.province}} {{item.city}} {{item.county}}</view>
					<view class="detail-site">{{item.addressDetail}}</view>
					<view class="userinfo">
						<view class="username">{{item.name}}</view>
						<view class="usernumber">{{item.tel}}</view>
						<view class="isdefault" v-if="item.isDefault">默认</view>
					</view>
				</view>
				<image src="/static/images/edit.png" class="edit" @click="cartStore.goAddSite(item.id,'编辑地址')" />
			</view>
		</view>
		
		<view class="addsite">
			<view class="add" @click="cartStore.goAddSite(0,'添加地址')">新增地址</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useCartStore,
		useLoginStore
	} from '../../stores/store.js';

	const cartStore = useCartStore()
	const loginStore = useLoginStore()

	onLoad(() => {
		cartStore.getSiteData()
	})
	
	onShow(() => {
		if (!loginStore.Token) {
			loginStore.goLogin('site')
			uni.showToast({
				title: '请先登录',
				icon: 'error'
			})
		}
	})
	
	// 跳转购物车
	const goCart = () => {
		uni.switchTab({
			url: '/pages/cart/cart'
		})
	}
</script>

<style lang="scss" scoped>
	.site-container {
		width: px2rpx(375);
		
		// navbar
		.header {
			width: px2rpx(375);
			height: px2rpx(50);
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;
		
			image {
				width: px2rpx(16);
				height: px2rpx(16);
				margin: 0 px2rpx(20);
			}
		
			.title {
				font-size: px2rpx(14);
				margin-left: px2rpx(110);
			}
		}

        // 地址列表
		.site-list {
			width: px2rpx(375);
			
			.site-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: px2rpx(375);
				height: px2rpx(100);
				border-bottom: 1px solid #ccc;
				
				.site-text {
					margin: px2rpx(10);
					width: px2rpx(300);
					height: px2rpx(100);
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					
					.big-site {
						margin-top:px2rpx(10);
						font-size: px2rpx(14);
						color: #ccc;
					}
					
					.detail-site {
						font-size: px2rpx(20);
					}
					
					.userinfo {
						margin-top:px2rpx(3);
						display: flex;
						
						.username {
							font-size: px2rpx(16);
						}
						
						.usernumber {
							margin-left: px2rpx(10);
							font-size: px2rpx(16);
						}
						
						.isdefault {
							width: px2rpx(35);
							height: px2rpx(20);
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: px2rpx(14);
							background-color: #ffede6;
							color: #ef6b33;
							border-radius: px2rpx(3);
							margin-top: px2rpx(2);
							margin-left: px2rpx(5);
						}
						
					}
				}
				
				.edit {
					width: px2rpx(25);
					height: px2rpx(25);
					margin-right: px2rpx(10);
				}
			}
		}
	
	    // 新增地址
		.addsite {
			position: fixed;
			height: px2rpx(70);
			width: px2rpx(375);
			border-top: 1px solid #ccc;
			bottom: px2rpx(0);
			display: flex;
			justify-content: center;
			align-items: center;
			
			.add {
				height: px2rpx(45);
				width: px2rpx(300);
				background-color: red;
				border-radius: px2rpx(25);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}
		}
	}
</style>